 <template>
  <view class="zong">
    <text>健身房(泉州店)</text>
    <view class="box">
      <scroll-view scroll-x="true">
        <block v-for="(item, index) in dayList" :key="index">
          <view class="dayTitle" :class="current == index? 'select' : ''" @click="timeSelectd(index)">
            <view class="dayTitle-day">
              <view>{{ item.day }}</view>
              <view v-if="index == 0" style="font-size: 25upx;">今天</view>
              <view v-else style="font-size: 25upx;">星期{{ item.week }}</view>
            </view>
            <view v-if="showBox && current === index" class="addedBox" @click="boxClicked">
              <view class="plus-container">
                <text class="jiahao">+</text>
              </view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
    <view v-if="showMenu" class="protagonist-avatar">
      <view class="hezi">
        <image src="../static/logo.png" class="tupian">
        <view style="display: block;">
          <view>这是一段文字描述。</view>
          <view>类型：会员免费</view>
        </view>
        <u-button class="yuyue">预约</u-button>
      </view>
      <view class="hezi">
        <image src="../static/logo.png" class="tupian">
        <view style="display: block;">
          <view>这是一段文字描述。</view>
          <view>类型：会员免费</view>
        </view>
        <u-button class="yuyue">预约</u-button>
      </view>
    </view>
  </view>
</template>
 <script>
	import common from "@../../pages/common/common.js";
 	export default {
 		data() {
 			return {
				 isShow: false,
				 current: 0,
				 dayList: [],
				 xzTime: common.GetNowTime(new Date()),
				 showBox: false, // 用于控制盒子的显示
				 showMenu: false, // 用于控制菜单的显示
				 xianshi:false,//用于辅助控制菜单显示和隐藏
 			};
 		},
		 onLoad() {
		 this.dayList = common.weekDate().dayList;
		 },
 		methods: {
			 timeSelectd(index) {
				 if(this.xianshi){
					 this.xianshi=false
				 }else{
					 console.log(index)
					 this.current = index;
					 let date = this.dayList[index].year + '-' + this.dayList[index].month + '-' + this.dayList[index].day;
					 date = common.GetNowTime(new Date(date));
					 this.xzTime = date;
					 this.showBox = true;
					 this.showMenu=false
				 }
			 console.log(this.xzTime);
			 },
			  boxClicked() {
				   this.showMenu = true;
				   this.xianshi = true;
			         // 在这里处理可点击盒子的点击事件
			         console.log('可点击盒子被点击了');
			},
 		},
 	};
 </script>

 <style>
 	page {
 		background-color: black;
 		/* 这里设置你想要的背景颜色，比如浅灰色 */
 	}
 	.protagonist-avatar {
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		width: 450rpx;
 	}
	.hezi{
		display: flex;
		align-items: center; 
		background-color: aliceblue; 
		width: 530rpx; 
		height: 100rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	
	.box {
	 padding: 30upx;
	 color: #ffffff;
	}
	scroll-view {
	 padding: 20upx 0;
	 width: 100%;
	 white-space: nowrap;
	}
	.dayTitle {
	 width: 12%;
	 height: 80rpx;
	 border-radius: 20rpx;
	 text-align: center;
	 display: inline-block;
	}
	.dayTitle-day{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.select {
	 color: black;
	 background-color: aliceblue;
	}
	.addedBox{
	 color: #ffffff;
	 width: 60rpx;
	 height: 60rpx;
	 border: 1px;
	 border-style: dotted;
	 border-radius: 60rpx;
	}
	.jiahao{
		font-size: 50rpx;
	}
	.tupian{
		display: flex;
		align-items: center; 
		width: 120rpx; 
		height: 120rpx; 
	}
	.yuyue{
		width: 150rpx; 
		height: 50rpx;
		border-radius: 50rpx; 
		background-color: greenyellow; 
		color:white; 
		display:flex; 
		justify-content:center; 
		align-items:center;
	}
 </style>